<template>
  <div class="nav">
    <div class="tab">
      <router-link v-for="(item,index) of tabList" :key="index" class="tab-item" :id="item.id" :to="item.url">
        {{item.tabName}}
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TabComponent',
  props: ['tabList'],
  data () {
    return {
      activeName: 'first'
    }
  },
  methods: {
  }
}
</script>

<style lang="stylus" scoped>
  .tab
   margin 0 auto
   display flex
   width 70%
   min-width 900px
   .tab-item
    color #FFF
    font-size 18px
    line-height 40px
    width 150px
    height 40px
    padding 5px
    text-align center
    cursor pointer
    &:hover
      background-color #F64400
      color: #FFF
  .router-link-exact-active
    background-color #F64400
    color: #FFF
</style>
